<template>
  <div class="bottom-navBar">
    <div class="shop-info left">
      <div>
        <span class="icon service"></span> 客服
      </div>
      <div>
        <span class="icon shop"></span>店铺
      </div>
      <div>
        <span class="icon select"></span>收藏
      </div>
    </div>
    <div class="operation right">
      <div class="add-cart" @click="addCart">加入购物车</div>
      <div class="buy">购买</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "bottomNavBar",
  data() {
    return {};
  },
  methods: {
    addCart() {
      this.$emit("addCart");
    }
  }
};
</script>

<style lang="less" scoped>
.bottom-navBar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  height: 49px;
  background-color: #fff;
  .shop-info,
  .operation {
    flex: 1;
  }
  .shop-info {
    font-size: 14px;
    display: flex;
    text-align: center;
    .icon {
      display: block;
      width: 22px;
      height: 22px;
      margin: 10px auto 3px;
      background-image: url("~assets/img/detail/detail_bottom.png");
      background-size: 100% 685%;
    }
    .service {
      background-position: 0 -53px;
    }
    .shop {
      background-position: 0 -98px;
    }
    div {
      flex: 1;
    }
  }
  .operation {
    display: flex;
    div {
      flex: 1;
      text-align: center;
      line-height: 50px;
    }
    .add-cart {
      background-color: #ffe817;
      color: #333;
    }
    .buy {
      background-color: #f69;
      color: #fff;
    }
  }
}
</style>